@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        @if($type == 'time_access')
                            会费兑换码管理
                        @elseif($type == 'product_exchange')
                            商品兑换码管理
                        @elseif($type == 'discount')
                            会员钱包兑换码管理
                        @else
                            兑换活动管理
                        @endif
                    </h5>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createActivityModal">
                        创建兑换码
                    </button>
                </div>

                <div class="card-body">
                    <!-- 添加搜索表单 -->
                      <div class="mb-3">
                         <form method="post" action="{{ route('codes.search.post') }}" class="d-flex">
                             @csrf
                             <input type="text" class="form-control" name="search" placeholder="请输入兑换码">
                             <button type="submit" class="btn btn-primary">搜索</button>
                         </form>
                      </div>

                    @if (session('success'))
                        <div class="alert alert-success" role="alert">
                            {{ session('success') }}
                        </div>
                    @endif

                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>兑换码</th>
                                    <th>名称</th>
                                    <th>类型</th>
                                    <th>信息</th>
                                    <th>过期时间</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($redemptionCodes as $code)
                                <tr>
                                    <td>{{ $code->id }}</td>
                                    <td>{{ $code->code }}</td>
                                    <td>{{ $code->name }}</td>
                                    <td>
                                        @if($code->type == 'time_access')
                                            <span class="badge bg-primary">会费兑换</span>
                                        @elseif($code->type == 'product_exchange')
                                            <span class="badge bg-success">商品兑换</span>
                                        @elseif($code->type == 'discount')
                                            <span class="badge bg-warning">钱包充值</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($code->type == 'time_access' && isset($code->metadata['days']))
                                            {{ $code->metadata['days'] }}天会员
                                        @elseif($code->type == 'product_exchange' && isset($code->metadata['product_name']))
                                            {{ $code->metadata['product_name'] }}
                                        @elseif($code->type == 'discount' && isset($code->metadata['amount']))
                                            {{ $code->metadata['amount'] }}元
                                        @else
                                            --
                                        @endif
                                    </td>
                                    <td>{{ $code->expired_at }}</td>
                                    <td>
                                        @if($code->status == 'unused')
                                            <span class="badge bg-success">未使用</span>
                                        @elseif($code->status == 'used')
                                            <span class="badge bg-secondary">已使用</span>
                                        @elseif($code->status == 'expired')
                                            <span class="badge bg-danger">已过期</span>
                                        @elseif($code->status == 'disabled')
                                            <span class="badge bg-dark">已禁用</span>
                                        @endif
                                    </td>
                                    <td>{{ $code->created_at }}</td>
                                    <td>
                                        @if($code->status == 'unused')
                                            <a href="{{ route('codes.qrcode', $code->id) }}" class="btn btn-sm btn-outline-primary" title="生成二维码">
                                                <i class="fas fa-qrcode"></i> 生成二维码
                                            </a>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="8" class="text-center">暂无兑换码数据</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>

                        <!-- 分页导航 -->
                        <nav aria-label="Page navigation" class="mt-3">
                            {{ $redemptionCodes->links() }}
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 创建活动模态框 -->
<div class="modal fade" id="createActivityModal" tabindex="-1" aria-labelledby="createActivityModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createActivityModalLabel">
                    @if($type == 'time_access')
                        创建会费兑换码
                    @elseif($type == 'product_exchange')
                        创建商品兑换码
                    @elseif($type == 'discount')
                        创建会员钱包兑换码
                    @else
                        创建兑换活动
                    @endif
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('codes.store', ['type' => $type]) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">
                            @if($type == 'time_access')
                                会费兑换码名称
                            @elseif($type == 'product_exchange')
                                商品兑换码名称
                            @elseif($type == 'discount')
                                会员钱包兑换码名称
                            @else
                                活动名称
                            @endif
                        </label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>

                    <!-- 当不是会费兑换码时，显示可兑换商品选项 -->
                    @if($type != 'time_access')
                    <div class="mb-3">
                        <label for="product_id" class="form-label">可兑换商品</label>
                        <select class="form-control" id="product_id" name="product_id" required>
                            <option value="">请选择商品</option>
                            @foreach($products as $product)
                                <option value="{{ $product->id }}" data-price="{{ $product->price }}">
                                    {{ $product->name }} (价格：{{ $product->price }}元)
                                </option>
                            @endforeach
                        </select>
                    </div>
                    @else
                    <!-- 会费兑换码不需要选择商品，添加隐藏字段 -->
                    <input type="hidden" name="product_id" value="">
                    @endif

                    <div class="mb-3">
                        <label for="value" class="form-label">
                            @if($type == 'time_access')
                                会费可用天数
                            @else
                                兑换码价值
                            @endif
                        </label>
                        <input type="number" class="form-control" id="value" name="value" 
                            @if($type == 'time_access') 
                                min="1" 
                            @else 
                                step="0.01" min="0" 
                            @endif 
                            required>
                        <div class="form-text">
                            @if($type == 'time_access')
                                可按天设置，例如：为7天、15天、30天、180天等。
                            @else
                                建议价值：<span id="suggested_value">0</span>元
                            @endif
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="total_codes" class="form-label">生成兑换码数量</label>
                        <input type="number" class="form-control" id="total_codes" name="total_codes" min="1" required>
                    </div>

                    <div class="mb-3">
                        <label for="end_time" class="form-label">结束时间</label>
                        <input type="datetime-local" class="form-control" id="end_time" name="end_time">
                        <div class="form-text">如不设定，将默认设定为当前时间的2年后。</div>
                    </div>
                </div>
                <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">
                            @if($type == 'time_access')
                                创建会费兑换码
                            @elseif($type == 'product_exchange')
                                创建商品兑换码
                            @elseif($type == 'discount')
                                创建会员钱包兑换码
                            @else
                                创建活动
                            @endif
                        </button>
                    </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
// 商品选择事件监听
if (document.getElementById('product_id')) {
    document.getElementById('product_id').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const price = selectedOption.dataset.price || 0;
        document.getElementById('value').value = price;
        document.getElementById('suggested_value').textContent = price;
    });
}
</script>
@endpush
@endsection